<script setup lang="ts">
import { watchEffect, ref } from 'vue';

const skillSol = [
  "马尔可夫优势", "", "佐尔汉的技艺", "", "战吼", "b恐惧怒吼", "", "破胆怒吼", "", "",
  "战意", "刀锋横扫", "t风卷残云", "", "", "撕裂", "", "奥莱隆之怒",
  "立场波", "b震颤", "", "裂甲之力", "", "内部创伤", "", "", "",
  "", "", "闪击", "", "", "", "攻其不备", "防守反击", "",
  "节奏打击", "t不谐和弦", "", "战斗姿态", "", "", "", "致死旋律", "",
  "", "曼海尔的意志", "战斗警觉", "马尔可夫的防御", "战争号令", "", "小队战术", "", "曼海尔的壁垒",
  "", "军事素养", "防护训练", "久经沙场", "", "功勋卓著", "", "百战之躯",
]

const skillDemo = [
  "", "附身烈焰", "", "", "回火", "", "防爆护盾", "", "",
  "火焰打击", "", "爆裂打击", "t灼热之力", "", "静电打击", "", "", "炽烈硫磺",
  "", "黑水鸡尾酒", "b灼热配方", "t灼热打击", "恶魔之火", "", "", "痛苦烈焰", "",
  "眩晕投掷", "b迅捷投掷", "", "火力全开", "罐式炸弹", "t震荡炸弹", "", "改良外壳", "奥祖因的选召",
  "", "", "", "", "", "", "铝热地雷", "", "地狱火地雷",
  "闪光弹", "", "灼热之光", "手榴弹", "t灭天手雷", "高热冲击", "", "破碎猛爆", "",
  "", "", "复仇烈焰", "", "奥祖因的愤怒", "迫击抛射炮", "重型武器", "", "巨型炸弹",
]
const skillOcc = [
  "", "", "噬命魔印", "", "", "破灭", "", "末日闪电", "",
  "", "索拉尔的巫火", "", "t祭祀之剑", "", "二次仪式", "", "", "附身",
  "德里格的邪眼", "血爆", "b聚能凝视", "", "恐惧凝视", "", "", "邪物喷涌", "",
  "", "血瘟疫", "", "t狂热怒意", "恶疾", "", "", "黑死病", "",
  "虚弱诅咒", "", "易伤", "德里格之血", "", "", "守护者之躯", "", "",
  "召唤乌鸦", "血肉缝合", "", "风暴之心", "", "闪电打击", "拜斯迈的羁绊", "", "掌控",
  "", "", "召唤地狱犬", "", "灰烬之爪", "", "地狱之火", "", "炼狱吐息",
]

const skillNight = [
  "双刃", "贝尔格斯安的切割", "尼达拉的隐手", "阿玛阿斯塔的瞬影", "", "死亡旋风", "", "", "处决",
  "", "幻影刀", "b狂热掷", "寻心击", "", "", "幽冥刃", "", "刀灵",
  "阿玛阿斯塔的爆裂之刃", "", "", "致命突袭", "钢铁之环", "t寒霜之环", "", "屠戮之环", "",
  "", "", "暗影袭", "", "", "尼达拉的正义裁决", "", "", "暗夜降临",
  "", "气爆", "b贝尔格斯安的呼吸", "暗影舞", "", "", "元素觉醒", "", "",
  "暗影面纱", "", "", "夜之寒气", "刀锋壁垒", "刀锋陷阱", "", "毁灭刀锋", "",
  "", "", "幻影甲", "", "解刨", "", "无情终章",
]

const skillArc = [
  "伊斯坎德拉的元素转换", "b化身", "过载", "", "", "元素平衡", "", "", "",
  "", "", "艾瑞奥特之镜", "麦文的守护领域", "", "", "转化", "", "狂野之力",
  "", "卡里多的风暴", "b阿格维克斯的愤怒", "", "炼狱", "", "", "", "",
  "帕内蒂的复制飞弹", "", "", "失真", "", "超压", "", "激射", "毁灭",
  "", "奥莱克希拉的急速冻结", "", "", "绝对零度", "阿尔布雷特的虚化射线", "t堕落之力", "", "崩解",
  "", "", "特洛赞的天之碎片", "", "冰封之核", "", "", "碎裂星体", "星之契约",
  "心灵专注", "", "", "奥术意志", "净化", "", "心智迅捷", "撕裂现实", "",
]

const skillShaman = [
  "蛮力", "", "狂野饥渴", "震荡大地", "温迪戈图腾", "", "", "血之契约", "",
  "", "原始打击", "b雷电打击", "激流", "", "风暴潮", "风暴图腾", "b腐化风暴", "风暴召唤者的契约",
  "野性", "b熊x之力", "", "雄猪之韧", "", "", "风暴之触", "", "",
  "", "", "风之恶魔", "", "狂风暴雨", "", "", "风暴漩涡", "",
  "吞噬虫群", "紧缚藤蔓", "", "", "", "缠卷藤蔓", "", "", "召唤原始之灵",
  "", "", "召唤荆棘兽", "", "大地猛击", "", "", "激励风采", "原始羁绊",
  "", "莫格卓根的契约", "", "野性之心", "", "橡树皮", "",
]

const skillInqu = [
  "远程专家", "爆裂子弹", "", "", "寒冰弹幕", "", "", "风暴散射", "",
  "", "", "重生之语", "t武器之语", "活力", "", "钢铁决心", "", "信念光环",
  "痛苦之语", "", "苦难之语", "", "", "死亡判决", "", "甘达尔号角", "",
  "", "", "伊格纳法之焰", "t污染之焰", "增强", "", "地狱肃清", "", "无尽之焰",
  "", "哈加拉德符文", "", "凛冽", "", "", "寒潮", "", "责难光环",
  "艾尔格洛斯的风暴之盒", "b阿拉加斯特的奥术织网", "", "闪电绳链", "", "审判官秘印", "符文封印", "奥术强化", "",
  "", "", "致命瞄准", "卡拉斯特符文", "", "引燃", "", "神器技艺",
]

const skillNec = [
  "收割打击", "", "", "死灵刀锋", "", "灵魂虹吸", "b灵魂灼烧", "血沸", "",
  "吸取精华", "b黄泉颤抖", "饥渴之触", "", "分解", "", "", "", "灵魂先驱",
  "", "", "", "贪婪大地", "", "腐烂", "", "腐臭喷发", "",
  "", "骨刺收割", "t死亡收割", "", "恐惧", "", "灵魂收割", "", "精魂收割",
  "骷髅复生", "", "不死军团", "", "墓穴意志", "", "", "", "",
  "", "", "恶兆", "召唤疫病恶魔", "b不稳定畸变", "腐烂气息", "", "疫病爆发", "死亡主宰",
  "", "灵魂束缚", "", "幽灵之怒", "", "坟墓呼唤", "折磨印记",
]

const skillOath = [
  "护卫", "重击", "", "", "粉碎猛击", "清算之眼", "", "魂火", "",
  "", "", "维尔之力", "t火山之力", "火山步伐", "", "地质位移", "", "",
  "曼海尔神盾", "复仇之盾", "b荆棘庇护", "", "报复", "", "召唤至高神守护者", "t德里格之嗣", "天神化身",
  "", "", "", "审判", "", "粉碎裁决", "", "愤怒之心", "神圣使命",
  "正义狂热", "t德里格的斥责", "", "圣化", "", "", "惩戒", "", "",
  "", "美德降临", "", "庇护", "", "斥责", "", "", "三巫神之路",
  "", "", "坚毅", "升华", "", "", "目标明确",
]

function showSkill(txt: string) {
  const head = txt[0]
  if (head === 'b') {
    return `<p class="sk-b">${txt.slice(1)}</p>`
  } else if (head === 't') {
    return `<p class="sk-t">${txt.slice(1)}</p>`
  } else if (txt.length > 6) {
    return `<p class="sk-h">${txt}</p>`
  } else if (txt.length == 6) {
    return `<p class="px-1 sk-h">${txt}</p>`
  } else {
    return `${txt}`
  }
}

watchEffect(async () => {

})
</script>

<template>
  <div class="container mx-auto flex flex-col gap-2">

    <div class="gd bgsol rounded mx-auto flex flex-row text-amber-50">
      <div class="grow text-center p-1">
        士兵
      </div>
      <div class="w-[720px]">
        <div class="grid grid-cols-9 grid-rows-7 grid-flow-row-dense mt-[22px]">
          <h3 class="sk" v-for="(value, ii) in skillSol" :key="ii" v-html="showSkill(value)">
          </h3>
        </div>
      </div>
      <div class="w-[22px]"></div>
    </div>

    <div class="gd bgdem rounded mx-auto flex flex-row text-amber-50">
      <div class="grow text-center">
        爆破者
      </div>
      <div class="w-[720px]">
        <div class="grid grid-cols-9 grid-rows-7 grid-flow-row-dense mt-[22px]">
          <h3 class="sk" v-for="(value, ii) in skillDemo" :key="ii" v-html="showSkill(value)">
          </h3>
        </div>
      </div>
      <div class="w-[22px]"></div>
    </div>

    <div class="gd bgocc rounded mx-auto flex flex-row text-amber-50">
      <div class="grow text-center">
        神秘学者
      </div>
      <div class="w-[720px]">
        <div class="grid grid-cols-9 grid-rows-7 grid-flow-row-dense mt-[22px]">
          <h3 class="sk" v-for="(value, ii) in skillOcc" :key="ii" v-html="showSkill(value)">
          </h3>
        </div>
      </div>
      <div class="w-[22px]"></div>
    </div>

    <div class="gd bgnit rounded mx-auto flex flex-row text-amber-50">
      <div class="grow text-center">
        夜刃
      </div>
      <div class="w-[720px]">
        <div class="grid grid-cols-9 grid-rows-7 grid-flow-row-dense mt-[22px]">
          <h3 class="sk" v-for="(value, ii) in skillNight" :key="ii" v-html="showSkill(value)">
          </h3>
        </div>
      </div>
      <div class="w-[22px]"></div>
    </div>

    <div class="gd bgarc rounded mx-auto flex flex-row text-amber-50">
      <div class="grow text-center">
        奥术
      </div>
      <div class="w-[720px]">
        <div class="grid grid-cols-9 grid-rows-7 grid-flow-row-dense mt-[22px]">
          <h3 class="sk" v-for="(value, ii) in skillArc" :key="ii" v-html="showSkill(value)">
          </h3>
        </div>
      </div>
      <div class="w-[22px]"></div>
    </div>

    <div class="gd bgsm rounded mx-auto flex flex-row text-amber-50">
      <div class="grow text-center">
        萨满
      </div>
      <div class="w-[720px]">
        <div class="grid grid-cols-9 grid-rows-7 grid-flow-row-dense mt-[22px]">
          <h3 class="sk" v-for="(value, ii) in skillShaman" :key="ii" v-html="showSkill(value)">
          </h3>
        </div>
      </div>
      <div class="w-[22px]"></div>
    </div>

    <div class="gd bginq rounded mx-auto flex flex-row text-amber-50">
      <div class="grow text-center">
        审判官
      </div>
      <div class="w-[720px]">
        <div class="grid grid-cols-9 grid-rows-7 grid-flow-row-dense mt-[22px]">
          <h3 class="sk" v-for="(value, ii) in skillInqu" :key="ii" v-html="showSkill(value)">
          </h3>
        </div>
      </div>
      <div class="w-[22px]"></div>
    </div>

    <div class="gd bgnec rounded mx-auto flex flex-row text-amber-50">
      <div class="grow text-center">
        死灵法师
      </div>
      <div class="w-[720px]">
        <div class="grid grid-cols-9 grid-rows-7 grid-flow-row-dense mt-[22px]">
          <h3 class="sk" v-for="(value, ii) in skillNec" :key="ii" v-html="showSkill(value)">
          </h3>
        </div>
      </div>
      <div class="w-[22px]"></div>
    </div>

    <div class="gd bgoa rounded mx-auto flex flex-row text-amber-50">
      <div class="grow text-center">
        守誓者
      </div>
      <div class="w-[720px]">
        <div class="grid grid-cols-9 grid-rows-7 grid-flow-row-dense mt-[22px]">
          <h3 class="sk" v-for="(value, ii) in skillOath" :key="ii" v-html="showSkill(value)">
          </h3>
        </div>
      </div>
      <div class="w-[22px]"></div>
    </div>
  </div>
</template>

<style>
.sk {
  height: 70px;
  text-align: center;
}

.sk .sk-b {
  position: relative;
  bottom: -32px;
}

.sk .sk-t {
  position: relative;
  top: -38px;
}

.sk .sk-h {
  position: relative;
  line-height: 1;
  top: -6px;
}

.gd.bgsol {
  background: #000 url(/grim/soldier.jpg);
  width: 976px;
  height: 492px;
  background-position: -4px -8px;
}

.gd.bgdem {
  background: #000 url(/grim/demo.jpg);
  width: 976px;
  height: 490px;
  background-position: -4px -8px;
}

.gd.bgocc {
  background: #000 url(/grim/occu.jpg);
  width: 976px;
  height: 492px;
  background-position: -4px -8px;
}

.gd.bgnit {
  background: #000 url(/grim/night.jpg);
  width: 976px;
  height: 492px;
  background-position: -4px -8px;
}

.gd.bgarc {
  background: #000 url(/grim/arcan.jpg);
  width: 976px;
  height: 492px;
  background-position: -4px -8px;
}

.gd.bgsm {
  background: #000 url(/grim/shaman.jpg);
  width: 976px;
  height: 492px;
  background-position: -4px -8px;
}

.gd.bginq {
  background: #000 url(/grim/inqu.jpg);
  width: 976px;
  height: 492px;
  background-position: -4px -8px;
}

.gd.bgnec {
  background: #000 url(/grim/nec.jpg);
  width: 976px;
  height: 492px;
  background-position: -4px -8px;
}

.gd.bgoa {
  background: #000 url(/grim/oath.jpg);
  width: 976px;
  height: 492px;
  background-position: -4px -8px;
}
</style>
